<template>
  <div class="editorUser-contanier">
    <div class="editorUser-header">
      <el-date-picker v-model="yearText" type="year" value-format="yyyy" placeholder="选择年" style="width:100px;" @change="onSearch">
      </el-date-picker>&nbsp;&nbsp;
      <h3>年度临安区上报单位基本信息</h3>(&nbsp;
      <el-select v-model="searchKey" placeholder="按一级单位上报查询" size='mini' @change="onSearch">
        <el-option v-for="item in departmentData" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      &nbsp;)
    </div>
    <div class="editorUser-content">
      <el-table ref="singleTable" border :data="userLists" highlight-current-row style="width: 100%">
        <el-table-column type="index" width="50" :index="indexMethod">
        </el-table-column>
        <el-table-column property="DepartmentName" label="单位名称">
        </el-table-column>
        <el-table-column property="ReportAt" label="上报时间" width="200">
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.State==0">未审</span>
            <span v-else-if="scope.row.State==1">已审</span>
            <span v-else style="color: red">未报</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope" v-if="scope.row.State!=2">
            <el-button size="mini" @click="handleEdit(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="editorUser-page" v-if="count>pageSize+1">
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="pageSize" layout="prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        searchKey: '',
        yearText: '',
        departmentData: ['按一级单位上报查询'],
        userLists: [],
        currentPage3: 1,
        count: 0,
        pageIndex: 1,
        pageSize: 15
      }
    },
    methods: {
      indexMethod(index) {
        return this.pageSize * (this.pageIndex - 1) + index + 1
      },
      onSearch() {
        this.getUserList()
      },
      handleCurrentChange(val) {
        this.pageIndex = val
        this.currentPage3 = val
        this.getUserList()
        console.log(`当前页: ${val}`);
      },
      // 显示用户编辑页面
      handleEdit(row) {
        console.log(row);
        this.$router.push(`/unitInfoDetail/${this.yearText}/${row.DepartmentName}`)
      },
      // 获取信息列表
      async getUserList() {
        this.userLists = [];
        console.log(this.yearText)
        this.searchKey = this.searchKey == '按一级单位上报查询' ? '' : this.searchKey;
        const result = await this.$get('/api/DepartmentEnergy', { year: this.yearText, departmentName: this.searchKey, pageSize: this.pageSize, pageIndex: this.pageIndex })
        console.log(result, '用户列表')
        this.userLists = result.Data
        this.count = result.Count
      },
      async getDepartmentNames() {
        const result = await this.$get('/api/User/getDepartmentNames')
        var obj = JSON.parse(localStorage.getItem('userInfo'))
        if (obj.role == '2') {
          this.searchKey = result[0]
          this.departmentData = result;
        } else {
          this.departmentData = this.departmentData.concat(result)
        }
        this.getUserList()
      },
    },
    created() {
      this.yearText = new Date().getFullYear() + ''
      this.showHome.isShow = false;
      this.getDepartmentNames()

    }
  }

</script>
<style lang="scss" scoped>
  .editorUser-contanier {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .active {
    color: red;
  }

  .editorUser-header {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    h3 {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      margin-right: 10px;
    }
  }

  .editorUser-content {
    height: 550px;
    width: 100%;
    margin-top: 10px;
    padding: 0 15px;
  }

  .editorUser-page {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .el-input {
    width: 200px;
    height: 25px;
    line-height: 25px;
  }
</style>